<template>
	<div id="register">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>注册领取试用</p>
		</div>
		<img id="logo" src="../../static/img/logo-01.png"/>
		<div class="register_item">
			<input type="text" v-model="nickName" placeholder="请输入昵称" />
		</div>
		<div class="register_item">
			<input type="tel" v-model="phone" placeholder="请输入手机号" />
		</div>
		<div class="verification">
			<input type="text" v-model="code" placeholder="请输入验证码" />
			<!--<input v-if="verificationShow" @click="phoneCode" type="button" value="获取验证码" />
			<input v-if="!verificationShow" type="button" style="width: 10rem;" v-model="getVerification" />-->
			<input  type="button" style="width: 10rem;"  :value="getVerification" @click="phoneCode"/>
		</div>
		<div class="register_item">
			<input type="password" v-model="password" placeholder="请输入密码" />
		</div>
		<div class="register_item">
			<input type="password" v-model="passwordAgain" placeholder="请再次输入密码" />
		</div>
		<div class="register_item" >
			<input v-if="inviteLink" type="text" v-model="invite" readonly />
			<input v-else type="text" v-model="invite" placeholder="请输入邀请码，没有可不填" />
		</div>
		<input id="sub" @click="register" type="button" value="注册领取试用" />
	</div>
</template>

<script>
export default{
	name: 'register',
	data:function(){
		return{
			phone: '',//手机号
			code: '',//验证码
			nickName: '',//昵称
			getVerification: '获取验证码',//获取验证码
			keyCode:'',//加密验证码
//			verificationShow: true,//获取验证码切换
			invite: '',//邀请码
			password: '',//密码
			passwordAgain: '',//重复密码
			inviteLink: false,	// 是否为邀请链接进来的
			time: 60,
			USER_AUTHO: '',
		}
	},
	methods:{
		register:function(){
			this.$loading();
			var _this = this;
			let postData = _this.$qs.stringify({
				    phone:_this.phone,
				    code:_this.code,
				    keyCode:_this.keyCode,
				    invite:_this.invite,
				    password:_this.password,
				    nickName:_this.nickName,
				    USER_AUTHO:_this.USER_AUTHO,
			});
			_this.$axios.post('/user/autho/public/signup',postData).then(function(res){
				if(res.data.message=="succ"){
//					_this.$alert("注册成功！")
					$("#loading").remove();
					_this.$alert("关注公众号完成注册！",function(){
						window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2MDY5NjQ1Nw==&scene=126#wechat_redirect');
					});
//					_this.$router.push('/login');
				}else{
					_this.$alert(res.data.result);
					$("#loading").remove();
				}   
			}).catch(function (error) {
			    console.log(error);
				$("#loading").remove();
			});
		},
		//--------获取验证码倒计时-------
		countDown:function(){
			var _this = this;
			if(_this.time != 60){
				return;
			}
//			_this.verificationShow = false;
			_this.getVerification = '60s后重新获取';
			var Time = setInterval(function(){
				if(_this.time == 1){
//					_this.verificationShow = true;
					_this.time = 60;
					_this.getVerification = '获取验证码';
					clearTimeout(Time);
				}else{
					_this.time -- ;
					_this.getVerification = _this.time + 's后重新获取';
				}
			},1000);
			
		},
		phoneCode:function(){
			var _this = this;
			if(_this.time != 60){
				return;
			}
			var reg=11 && /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
			if(!reg.test(this.phone)){
				this.$alert('请输入正确的手机号码');
				return;
			}
			_this.countDown();
			let postData = _this.$qs.stringify({
				phone:_this.phone,
			});
			_this.$axios.post('/sms/public/phoneCode',postData).then(function(res){
				if(res.data.message=="succ"){
					_this.keyCode = res.data.result;
					_this.$alert("发送成功");
				}else{
					_this.$alert("发送失败");
					console.log(res.data.result);
				}   
			}).catch(function (error) {
			    console.log(error);
			});
		},
		//-----------获取cookie-------------
		getCookie: function(name){
			var strcookie = document.cookie;//获取cookie字符串
			var arrcookie = strcookie.split("; ");//分割
			//遍历匹配
			for ( var i = 0; i < arrcookie.length; i++) {
				var arr = arrcookie[i].split("=");
				if (arr[0] == name){
				return arr[1];
				}
			}
			return "";
		},
		deleteCookie:function(key){ //删除cookie方法
	        var date = new Date(); //获取当前时间
	        date.setTime(date.getTime()-10000); //将date设置为过去的时间
	        document.cookie = key + "=v; expires =" +date.toGMTString();//设置cookie
        }
	},
	created: function(){
//		this.$axios.interceptors.response.use(
//		  response => {
////			console.log(response.headers.USER_AUTHO);
//			if(!response.headers.USER_AUTHO){
//				window.open('http://www.ganjinshi.com/gjs_service/wechat/autho/send','_self');
//			}else{
//				this.USER_AUTHO = response.headers.USER_AUTHO;
//			}
//		  })
		this.USER_AUTHO = '';
		this.USER_AUTHO = this.getCookie('USER_AUTHO');	
		this.deleteCookie('USER_AUTHO');
		var _this = this;
		if(this.USER_AUTHO==null||this.USER_AUTHO==""||this.USER_AUTHO=="null"){
			window.open('https://www.ganjinshi.com/gjs_service/wechat/autho/send','_self');
		}
//		else if(USER_AUTHO != 'OK'){
//			this.$alert('微信授权失败！',function(){
//				_this.$router.push('/login');
//			});
//		}
		this.invite = this.getCookie("invite");
		if(this.invite=="undefined"||this.invite==null||this.invite==''||this.invite==undefined){
			this.inviteLink = false;
		}else{
			this.inviteLink = true;
		} 
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#register{
	height: 100%;
	padding-top: 5rem;
	box-sizing: border-box;
	background-color: #fff;
}
#logo{
	width: 40%;
	display: block;
	margin: 4rem auto;
}
.register_item{
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #EEEEEE;
	height: 4rem;
	padding: 0 1rem;
	box-sizing: border-box;
}
/*.register_item img{
	height: 1.4rem;
	display: block;
	margin-right: 1rem;
}*/
.register_item input{
	width: 100%;
	border: none;
	height: 100%;
	font-size: 1.2rem;
}
.verification{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
	border-bottom: 1px solid #EEEEEE;
	height: 4rem;
	width: 90%;
	margin: 0 auto;
	box-sizing: border-box;
}
.verification input[type='text']{
	width: calc(100% - 8rem);
	border: none;
	height: 100%;
	font-size: 1.2rem;
}
.verification input[type='button']{
	height: 2.2rem;
	border: 1px solid #FF6565;
	border-radius: 50px;
	box-sizing: border-box;
	width: 8rem;
	color: #FF6565;
	background-color: #fff;
}
#sub{
	width: 80%;
	margin: 0 auto;
	height: 4rem;
	border-radius: 50px;
	background-color: #FF6565;
	color: #FFFFFF;
	font-size: 1.4rem;
	border: none;
	display: block;
	margin: 0 auto;
	margin-top: 3rem;
}
/*#focus{
	display: none;
}*/
</style>
